@import "common";

.wrap {
    main {
        // 套餐推荐
        .recommendation {
            width: 70%;
            margin: 0 auto;
            h2 {
                margin-top: vw(40);
                text-align: center;
                font-size: 2.5vw;
                font-weight: bold;
                color: $color;
            }
            > p {
                color: gray;
                font-size: vw(13);
                letter-spacing: 1px;
                font-family: Arial;
                text-align: center;
            }
            > img {
                width: 90%;
                margin: vw(20) auto 0;
            }
            .top-rec,
            .bottom-rec {
                width: 100%;
                margin-top: vw(20);
                display: flex;
                justify-content: space-between;
                .package {
                    width: 45%;
                    .top {
                        display: flex;
                        justify-content: space-between;
                        .content {
                            width: 50%;
                            background-color: #dededc;
                            position: relative;
                            p {
                                font-size: 1.4vw;
                                font-weight: 700;
                                color: $color;
                                margin-top: vw(10);
                                padding-left: 10%;
                            }
                            img {
                                width: 80%;
                                margin: 5px 10%;
                            }
                            ul {
                                margin: 5px 10%;
                                li {
                                    font-size: vw(22);
                                }
                            }
                            button {
                                background: none;
                                border: 1px solid $color;
                                font-size: 1vw;
                                color: $color;
                                padding: 2px 4%;
                                border-radius: 3px;
                                position: absolute;
                                left: 59%;
                                top: 84%;
                                cursor: pointer;
                            }
                        }
                        .photo {
                            width: 50%;
                        }
                    }
                    .bottom {
                        width: 100%;
                        height: 11%;
                        background-color: $color;
                        margin-bottom: vw(20);
                    }
                }
            }
        }

        // 普惠全国
        .wholeCountry {
            width: 70%;
            margin: 0 auto vw(20);
            @extend %titleStyle;
            .distribution {
                width: 85%;
                height: vw(450);
                margin-top: vw(20);
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                // 详细地址
                .address {
                    height: 100%;
                    width: 16%;
                    background-color: #efefef;
                    overflow: auto;
                    &::-webkit-scrollbar {
                        /*隐藏滚轮*/
                        display: none;
                    }
                    img {
                        width: 40%;
                        padding-top: 10%;
                        margin: 0 auto;
                    }
                    .content {
                        width: 73%;
                        margin: 10% auto;
                        font-size: 1vw;
                        color: gray;
                        p {
                            margin: 5px 0;
                        }
                    }
                }
                // 地图
                .map {
                    width: 48%;
                }
                // 门店选择
                .branch {
                    width: vw(200);
                    height: 100%;
                    ul {
                        height: 100%;
                        overflow: auto;
                        &::-webkit-scrollbar {
                            /*隐藏滚轮*/
                            display: none;
                        }
                        li {
                            height: 30px;
                            line-height: 30px;
                            width: 100%;
                            text-align: left;
                            font-size: 1vw;
                            margin-bottom: 7.6px;
                            padding: vw(5) 0;
                            background-color: #efeeee;
                            overflow: hidden;
                            cursor: pointer;
                            &:hover {
                                background-color: $color;
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }
    }
}
